<template>
    <div class="fiveONE" id="fiveONE"></div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      const fiveONE = this.$echarts.init(document.getElementById('fiveONE'));
      const option = {
        polar: {
          radius: [1, '70%']
        },
        titile: {
          text: '金融产品占比',
          show: true
        },
        angleAxis: {
          max: 100,
          startAngle: 90,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          data: ['股票', '债券', '期货', '基金', '外汇', '保险'],
          axisLine: {
            // show: false
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff',
            interval: 0
          }
        },
        tooltip: {},
        series: [
          {
            type: 'bar',
            itemStyle: {
              normal: {
                // 这里设置每个柱子颜色不一样
                color: function (params) {
                  // 定义一个颜色数组colorList
                  const colorList = ['#cca272', '#74608f', '#d7a02b', '#c8ba23', 'red', 'pink'];
                  return colorList[params.dataIndex]
                }
              }
            },
            data: [20, 33, 48, 50, 66, 80],
            coordinateSystem: 'polar'
          }
        ],
        splitLine: {
          interval: 5
        }
      }
      fiveONE.setOption(option);
    }
  }
}
</script>

<style lang="less" scoped>
.fiveONE {
    width: 495px;
    height: 352px;
}
</style>
